<template>
  <div class="line">
    <div class="left">
      <div class="title">{{ title }}</div>
    </div>
    <div class="right" @click="clickTap">
      <template v-if="Td == 'valid_day' || Td == 'card_type' || Td == 'bank'">
        <input :type="istype" readonly :placeholder="place" v-model="val" @blur="blurInp" />
      </template>
      <input v-else :type="istype" :placeholder="place" v-model="val" @blur="blurInp" />
      <van-icon name="arrow" v-if="link" color="#6E6E6E" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    istype:{
      type:null,
      default:"text"
    },
    val: {
      type: String,
      default: ""
    },
    place: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    link: {
      type: Boolean,
      default: false
    },
    Td: {
      type: null,
      default: ""
    }
  },
  data() {
    return {};
  },
  methods: {
    blurInp() {
      this.$emit("valInp", { value: this.val, type: this.Td });
    },
    clickTap() {
      if (this.Td == "valid_day" || this.Td == "card_type" || this.Td == "bank") {
        this.$emit("childParams", this.Td);
        return;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
input {
  border: none;
}

.line {
  padding: 1.0938rem 0.8125rem 1.0938rem 0;
  display: flex;
  align-items: center;

  .left {
    width: 5.1563rem;
    padding-left: 0.5rem;

    .title {
      text-align: left;
      font-size: 0.875rem;
    }
  }

  .right {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;

    input {
      flex: 1;
    }
  }
}
</style>